<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo-icalendar</title>
<link href="../jsease.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../core.js"></script>
<script type="text/javascript" src="../mask.js"></script>
<script type="text/javascript" src="../ipop.js"></script>
<script type="text/javascript" src="../icalendar.js"></script>
<style type="text/css">
.ical
    {
    border:0;
    width:175px;
    height:166px;
    margin:3px;
    }
    .ical .yymm
        {
        height:25px;
        line-height:25px;
        width:100%;
        }
        .ical .yymm .mosel,
        .ical .yymm .ymtxt
            {
            float:left;
            text-align:center;
            }
        .ical .yymm .ymtxt
            {
            width:17px;
            }
            .ical .yymm .mosel a.mms
                {
                float:left;
                width:22px;
                color:#00f
                }
        .ical .yymm .ysel,
        .ical .yymm .msel
            {
            float:left;
            width:55px;
            padding:1px 0;
            margin:2px 0 0;
            }
        .ical .yymm .msel
            {
            width:42px;
            }
    .ical .wkd
        {
        text-align:center;
        list-style:none;
        height:18px;
        line-height:18px;
        width:100%;
        border-bottom:1px solid #ccc;
        margin:0 0 1px;
        }
        .ical .wkd .wd
            {
            float:left;
            width:25px;
            height:18px;
            }
    .ical .days
        {
        list-style:none;
        margin:0 auto;
        text-align:center;
        width:100%;
        height:auto;
        }
        .ical .days .day
            {
            float:left;
            margin:0;
            }
            .ical .days .day a.act,
            .ical .days .day a.pnd
                {
                float:left;
                outline:0;
                text-decoration:none;
                line-height:20px;
                height:20px;
                width:25px;
                color:#000;
                }
            .ical .days .day a.pnm
                {
                color:#ccc;
                }
            .ical .days .day a.act,
            .ical .days .day a.sel,
                .ical .days .day a:hover.pnd
                {
                line-height:18px;
                height:18px;
                width:23px;
                border:1px outset #ccc;
                color:blue;
                }
            .ical .days .day a.sel,
                .ical .days .day a:hover.pnd,
                .ical .days .day a:hover.act
                {
                background:#def;
                }
            .ical .days .day a.act
                {
                color:red;
                }
                .ical .days .day a:hover.pnd
                    {
                    color:blue;
                    }

</style>
</head>

<body>
<div class="ical">
    <div class="yymm">
        <div class="mosel"><a class="mms" href="#"><－</a></div>
        <select class="ysel" name="yr"><option value="2010">2010</option><option value="2010">2011</option></select><div class="ymtxt">年</div>
        <select class="msel" name="mo"><option value="6">6</option><option value="12">12</option></select><div class="ymtxt">月</div>
        <div class="mosel"><a class="mms" href="#">＋></a></div>
    </div>
    <dl class="wkd">
        <dd class="wd">日</dd>
        <dd class="wd">一</dd>
        <dd class="wd">二</dd>
        <dd class="wd">三</dd>
        <dd class="wd">四</dd>
        <dd class="wd">五</dd>
        <dd class="wd">六</dd>
    </dl>
    <dl class="days">
        <dd class="day"><a class="pnd" href="#">1</a></dd>
        <dd class="day"><a class="pnd" href="#">2</a></dd>
        <dd class="day"><a class="pnd" href="#">3</a></dd>
        <dd class="day"><a class="pnd" href="#">4</a></dd>
        <dd class="day"><a class="pnd" href="#">5</a></dd>
        <dd class="day"><a class="pnd" href="#">6</a></dd>
        <dd class="day"><a class="pnd" href="#">7</a></dd>
        <dd class="day"><a class="pnd" href="#">8</a></dd>
        <dd class="day"><a class="pnd" href="#">9</a></dd>
        <dd class="day"><a class="pnd" href="#">10</a></dd>
        <dd class="day"><a class="pnd" href="#">11</a></dd>
        <dd class="day"><a class="pnd" href="#">12</a></dd>
        <dd class="day"><a class="pnd" href="#">13</a></dd>
        <dd class="day"><a class="pnd" href="#">14</a></dd>
        <dd class="day"><a class="act sel" href="#">15</a></dd>
        <dd class="day"><a class="pnd" href="#">16</a></dd>
        <dd class="day"><a class="pnd" href="#">17</a></dd>
        <dd class="day"><a class="pnd" href="#">18</a></dd>
        <dd class="day"><a class="pnd" href="#">19</a></dd>
        <dd class="day"><a class="pnd" href="#">20</a></dd>
        <dd class="day"><a class="act" href="#">21</a></dd>
        <dd class="day"><a class="pnd" href="#">22</a></dd>
        <dd class="day"><a class="pnd" href="#">23</a></dd>
        <dd class="day"><a class="pnd" href="#">24</a></dd>
        <dd class="day"><a class="pnd sel" href="#">25</a></dd>
        <dd class="day"><a class="pnd" href="#">26</a></dd>
        <dd class="day"><a class="pnd" href="#">27</a></dd>
        <dd class="day"><a class="pnd" href="#">28</a></dd>
        <dd class="day"><a class="pnd" href="#">29</a></dd>
        <dd class="day"><a class="pnd" href="#">30</a></dd>
        <dd class="day"><a class="pnd" href="#">31</a></dd>
        <dd class="day"><a class="pnd pnm" href="#">1</a></dd>
        <dd class="day"><a class="pnd pnm" href="#">2</a></dd>
        <dd class="day"><a class="pnd pnm" href="#">3</a></dd>
        <dd class="day"><a class="pnd pnm" href="#">4</a></dd>
    </dl>
</div>
<div style="background:#ffe;text-align:center;"><input type="text" /><input id="caldate" name="caldate" value="2010-06-20" type="text" readonly="readonly" style="padding:3px;margin:5px;" /></div>
<script type="text/javascript">
//<![CDATA[
def( 'mycald', 'icalendar', { id:'mycal', elem: 'caldate' } );
//]]>
</script>

</body>
</html>